<template>
  <div class="test-class">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
      v-if='dataList && dataList.length > 0' >
      <ul  class="follow-list">
        <li v-for='(item, index) in dataList' :key="index">
          <dl>
            <dt>
              <div class="tip">课程信息</div>
              <span>课时：</span>
              <span>{{item.courseName}}</span>
              <span>{{item.schoolName}}</span>
              <span>{{item.classesName}}</span>
            </dt>
            <dd>{{new Date(item.updateTime).format('yyyy-MM-dd')}}</dd>
          </dl>
        </li>
      </ul>
    </mt-loadmore>
    <e-placeholder v-else />
  </div>
</template>

<script>
import saleApi from 'api/sale.js'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      getSaleStudent: 'sale/getSaleStudent'
    })
  },
  data () {
    return {
      studentId: '',
      currentPage: 0, // 页面从1开始，1、2、3...
      dataList: [],
      allLoaded: false
    }
  },
  mounted () {
    this.studentId = this.$route.query.student_id
    this.getDataList('page1')
  },
  methods: {
    loadTop () {
      this.$refs.loadmore.onTopLoaded()
      this.currentPage = 0
      this.getDataList('page1')
    },
    loadBottom () {
      if (!this.allLoaded) {
        this.$refs.loadmore.onBottomLoaded()
        this.getDataList()
      }
    },
    getDataList (value) {
      this.currentPage += 1
      saleApi.getStudentTestClassList({
        page: this.currentPage,
        studentId: this.studentId
      }).then((res) => {
        if (this.currentPage >= res.data.pages) {
          this.allLoaded = true
        } else {
          this.allLoaded = false
        }
        if (value === 'page1') {
          this.dataList = []
        }
        this.dataList.push(...(res.data.list))
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.test-class{
  background: #fff;
  li{
    background: #fff;
    position: relative;
    z-index: 3;
    &:after{
      content: " ";
      border-bottom: 1px solid #aaa;
      display: block;
      height:0;
      width:100%;
      position: absolute;
      left: 0;
      bottom:0;
      transform: scaleY(0.5);
    }
  }
  dl{
    display:flex;
    padding: 0.26rem 0.24rem;
    dt{
      flex:1;
      .tip{
        margin-bottom:0.2rem;
      }
    }
    dd{
      width: 1.8rem;
      color:$color-sub;
      text-align: right;
    }
  }
}
</style>
